<template>
	<PickInventory v-model:List="list"></PickInventory>
	<el-table
		:data="store1.tempOoItem"
		style="width: 100%"
		ref="productTableRef"
	>
		<el-table-column fixed prop="productId" label="ID" width="80" />
		<el-table-column prop="productName" label="商品名称" width="120" />
		<el-table-column prop="qty" label="库存数量" width="80" />
		<el-table-column prop="realQty" label="出库数量" width="200">
			<template #default="scope">
				<el-input-number
					v-model="scope.row.realQty"
					:min="1"
					:max="scope.row.qty"
				/>
			</template>
		</el-table-column>
		<el-table-column label="存放地" width="120">
			<template #default="scope">
				<ShelfTree v-model="scope.row.shelfId"></ShelfTree>
			</template>
		</el-table-column>
		<el-table-column
			prop="productionDate"
			label="生产日期"
			width="120"
			:formatter="formatter"
		/>
		<el-table-column
			prop="expirationDate"
			label="过期日期"
			width="120"
			:formatter="formatter"
		/>
		<el-table-column prop="brief" label="备注" width="150">
			<template #default="scope">
				<el-input v-model="scope.row.brief" />
			</template>
		</el-table-column>
		<el-table-column fixed="right" label="操作" width="200">
			<template #default="scope">
				<el-button
					type="danger"
					size="small"
					@click="deleteProduct(scope.row)"
					>删除</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<br />
	<el-row :gutter="20">
		<el-col :span="22"><el-input v-model="formData.brief" /></el-col>
		<el-col :span="2"
			><el-button type="primary" @click="onSubmit"
				>提交</el-button
			></el-col
		>
	</el-row>
</template>

<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue';
	import { ElMessage, dayjs } from 'element-plus';
	import useStore1 from '@/store/store1';
	import PickInventory from '@/components/PickInventory.vue';
	import ShelfTree from '@/components/ShelfTree.vue';
	import { ooApi } from '@/api';
	const store1 = useStore1();
	
	const formData = reactive({
		brief: '',
		items: <any>[],
	});
	let list = ref([]);
	watch(
		() => list.value,
		(newVal) => {
			newVal.forEach((item: any) => {

				
				let exsitProduct = store1.tempOoItem.filter((p:any) => {
					return p.id === item.id;
				});
				if (exsitProduct.length == 0) {
					item.brief = '';
					store1.tempOoItem.push({
						productId: item.id,
						productName: item.productName,
						qty: item.qty,
						realQty: item.qty,
						shelfId: item.shelfId,
						brief: '',
						expirationDate: item.expirationDate,
						productionDate: item.productionDate,
					});
				}
			});
		}
	);
	const onSubmit = () => {
		if (store1.tempOoItem.length == 0) {
			ElMessage.error('未选择商品');
			return;
		}
		formData.items = store1.tempOoItem;
		formData.items.forEach((item) => {
			item.qty = item.realQty;
		});
		ooApi.insert.call(formData).then(() => {
			ElMessage.success('出库成功');
			store1.tempOoItem = [];
		});
	};
	const deleteProduct = (row: any) => {
		store1.tempOoItem = store1.tempOoItem.filter((p: any) => p !== row);
	};
	const formatter = (row, column, cellValue, index) => {
		return dayjs(cellValue).format('YYYY-MM-DD');
	};
</script>